<!DOCTYPE html>
<html lang="en">
	<head>
		<title>nTube: Watch Later</title>
		<meta name="application-name" content="nTube" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="iwebkit-use-fruit-styled-layout" value="true;version=1" />
		<meta name="description" content="nTube: Frontpage." />
		<meta charset="UTF-8" />
		<meta name="theme-color" content="#282828" />
		<link rel="manifest" href="/manifest.json" />
		<link rel="preload" href="resources/promise-queues.js" as="script" />
		<link rel="preload" href="resources/libWeb.js" as="script" />
		<link rel="preload" href="resources/settings.js" as="script" />
		<link rel="preload" href="resources/base.js" as="script" />
		<link rel="apple-touch-icon" href="/resources/logos/ntube-logo-192.png" />
		<script src="resources/promise-queues.js"></script>
		<script src="resources/libWeb.js"></script>
		<script src="resources/settings.js"></script>
		<script src="resources/base.js"></script>
		<script src="resources/search.js"></script>
		<link rel="stylesheet" type="text/css" href="resources/search.css" />
		<link rel="stylesheet" type="text/css" href="resources/base.css" />
		<link rel="search" type="application/opensearchdescription+xml" title="Search not(You)Tube." href="/nsearch.xml" />
		<style id="poly-item-css">
			.poly-item {
				padding-left: 5px;
				box-shadow: 0 14px 28px rgba(255, 255, 255, 0.11), 0 10px 10px rgba(255, 255, 255, 0.08);
				border: 1px solid white;
				margin-bottom: 10px;
			}
		</style>
		<style id="body-css">
			body {
				background-color: black;
				color: white;
			}
		</style>
		<style>
			.menu {
				position: fixed;
				top: 0;
				margin: auto;
				left: 0;
				right: 0;
				width: 100%;
				height: 32px;
				border-bottom: 1px solid green;
				margin-right: 0px;
				z-index: 15;
				display: flex;
			}

			.menu-item {
				flex: 1;
				max-width: 50%;
				overflow: hidden;
				white-space: nowrap;
			}

			.poly-item-light {
				padding-left: 5px;
				box-shadow: 0 14px 28px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.12);
				border: 1px solid black;
				margin-bottom: 10px;
			}

			@-webkit-keyframes slide {
				0% {
					background-position: 0% 0;
				}

				100% {
					background-position: 100% 0;
				}
			}

			@-moz-keyframes slide {
				0% {
					background-position: 0% 0;
				}

				100% {
					background-position: 100% 0;
				}
			}

			@keyframes slide {
				0% {
					background-position: 0% 0;
				}

				100% {
					background-position: 100% 0;
				}
			}
		</style>
		<style id="_css_fonts">
			html {
				font-family: -apple-system, BlinkMacSystemFont, "Product Sans", "Google Sans", "Segoe UI", "Arial", sans-serif;
			}
		</style>
	</head>

	<body>
		<div id="-ntube-menu" class="menu">
			<div class="menu-item">
				<p style="padding-left: 5px; margin-top: 5px; vertical-align: middle; font-weight: bold; display: inline-block; margin-right: 15px; width: auto">
					<span style="color: red">n</span><span id="ntube_main_menu_tube_label" style="color: lightgreen">Tube</span>
					<sub id="ntube_version_main_menu_label" style="font-size: 0.9em; line-height: 25%">1.5.0</sub>
					<img id="ntube-winter-logo" src="resources/events/christmas.png" title="Merry Christmas!" decoding="async" />
				</p>
				<div style="display: inline-block; vertical-align: middle; margin-right: 5px">
					<a href="/" title="Home Page">
						<img src="resources/icons/home.svg" alt="home" style="height: 2em; width: 2em" decoding="async" />
					</a>
				</div>
				<div style="display: inline-block; vertical-align: middle; margin-right: 5px">
					<a href="/trending" title="Trending Videos">
						<img src="resources/icons/trending.svg" alt="trending" style="height: 2em; width: 2em" decoding="async" />
					</a>
				</div>
				<div style="display: inline-block; vertical-align: middle; margin-right: 5px; margin-bottom: 3px">
					<a href="/settings" title="Settings">
						<img src="resources/icons/settings.svg" alt="settings" style="height: 2em; width: 2em" decoding="async" />
					</a>
				</div>
			</div>
			<div class="menu-item">
				<div style="height: 100%; display: flex">
					<style>
						#search_overlay {
							z-index: 8;
							position: fixed;
							background-color: rgba(0, 0, 0, 0.95);
							width: 100%;
							height: 100%;
							top: 0px;
							left: 0px;
						}

						.search_hidden {
							display: none;
							visibility: hidden;
						}

						#search_bar {
							background-color: inherit;
							color: inherit;
							border: none;
							border-left: 1px solid green;
							height: 100%;
							transition: border-bottom 0.5s ease-in-out;
							font-family: monospace;
							font-size: large;
							text-indent: 5px;
							flex-grow: 1;
							min-width: 50%;
						}

						#search_bar:focus {
							border-bottom: 1px solid green;
						}

						#search_button {
							border: none;
							border-left: 1px solid rgba(0, 128, 0, 0.7);
							border-right: none;
							height: 100%;
							background-color: inherit;
							color: inherit;
							margin-right: 0px;
							font-family: inherit;
						}
					</style>
					<input id="search_bar" type="text" name="Search nTube Bar." placeholder="Search nTube." />
					<button id="search_button" onclick="search_start(null);">Search</button>
				</div>
			</div>
			<script>
				run_promise(function () {
					SearchBar.init();
					id("_search_results").innerHTML = "";
				});
			</script>
		</div>
		<div id="search_overlay" class="search_hidden">
			<div style="padding-bottom: 30px"></div>
			<!--search_hidden-->
			<div style="width: 100%">
				<div style="float: left; padding-left: 5px">
					<h1 style="margin-top: 5px; margin-bottom: 5px">Search.</h1>
					<h3 style="margin-top: 5px; margin-bottom: 10px">Searching for <span id="search_query_display_string">uhhh...nothing.</span>.</h3>
				</div>
				<div style="float: right; padding-right: 15px; padding-top: 15px">
					<button style="width: 100px; height: 50px; border-radius: 30px; border: 1px solid green; background-color: inherit; color: inherit" onclick="search_close()">Close.</button>
					<script>
						function search_close() {
							id("search_overlay").classList.add("search_hidden");
						}
					</script>
				</div>
				<div style="clear: both"></div>
			</div>
			<div id="_search_results" class="poly-item" style="width: calc(100% - 30px); height: 78%; margin-right: 0px; overflow-y: auto; margin-left: 5px">
				<div class="search-item">
					<a class="search-link" href="#gotoShittyVideo">
						<img decoding="async" src="" alt="TOTALLY NOT CLICKBAIT" style="padding-left: 5px; display: inline; vertical-align: middle; width: 220px; height: 160px; margin-bottom: 5px" />
						<div style="padding-left: 15px; display: inline; vertical-align: middle">
							<p style="position: absolute; display: inline; vertical-align: middle; font-size: large; margin-top: 15px">CLICKBAIT TITLE</p>
							<p style="position: absolute; display: inline; vertical-align: bottom; font-size: small; margin-top: 45px">00:00 | -1 | <a href="#gotoShittyChannel">CHANNEL #2492049</a></p>
						</div>
					</a>
				</div>
			</div>
			<center>
				<button id="_search_load_more">Load more.</button>
			</center>
			<script>
				id("_search_results").innerHTML = "";
			</script>
		</div>
		<div style="padding-bottom: 30px"></div>
		<div class="poly-item" style="border-color: orange">
			<h2 style="margin-top: 5px; margin-bottom: 5px">Ongoing trial.</h2>
			<p style="margin-top: 5px; margin-bottom: 5px">This feature will be present for a limited amount of time and may or may not be implemented.</p>
		</div>
		<h2 style="margin-top: 5px; margin-bottom: 5px">Watch Later.</h2>
		<style>
			.video {
				width: calc(50% - 5px);
				display: inline-flex;
				flex: 1;
				flex-basis: calc(50% - 5px);
			}

			.video_idiv {
				display: table-cell;
				margin: auto 0px;
			}

			.video_poly {
				padding-left: 0px !important;
				margin-right: 2px;
				margin-bottom: 2px !important;
			}

			@media only screen and (max-width: 600px) {
				.video {
					flex-basis: 100vw !important;
					width: 100% !important;
				}
			}
		</style>
		<div id="-watch-later">Loading...</div>
		<style id="ntube-custom-css"></style>
		<script>
			if (!window.getCookie) {
				window.getCookie = function (name) {
					var nameEQ = name + "=";
					var ca = document.cookie.split(";");
					for (var i = 0; i < ca.length; i++) {
						var c = ca[i];
						while (c.charAt(0) == " ") c = c.substring(1, c.length);
						if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
					}
					return null;
				};
			}
			if (!window.setCookie) {
				window.setCookie = function (name, value, days) {
					var expires = "";
					if (days) {
						var date = new Date();
						date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
						expires = "; expires=" + date.toUTCString();
					}
					var val = value;
					if (value == null) {
						val = "null";
					} else if (typeof value != "string") {
						val = value.toString();
					}
					document.cookie = name + "=" + (val || "") + expires + "; path=/";
				};
			}
			function hasSettings() {
				try {
					const y = Settings.load("ntube_settings");
					return y !== null && isJson(y);
				} catch (e) {
					console.error(e);
					return false;
				}
			}
			try {
				nTube.init();
				nTube.initTheming();
			} catch (e) {}
			console.debug("Loading settings...");
			const setObject = nTubeSettings.auto();
			window.__SETTINGS_OBJECT = setObject;
			window.Config = window.__SETTINGS_OBJECT; // COMPAT HACK
			run_promise(function () {
				if (window.__SETTINGS_OBJECT.appearance.enable_new_look) {
					id("poly-item-css").innerHTML =
						".poly-item {padding-left: 5px; box-shadow: 0 14px 28px rgba(255, 255, 255, 0.08), 0 10px 10px rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); margin-bottom: 10px;}";
					try {
						id("collapsible-css").innerHTML = ".active, .collapsible:hover {background-color: rgba(80, 80, 80, 0.3);}";
					} catch (e) {}
				}
				if (window.__SETTINGS_OBJECT.appearance.custom_css) {
					try {
						id("ntube-custom-css").innerHTML = base64Decode(window.__SETTINGS_OBJECT.appearance.custom_css);
					} catch (e) {
						console.error(e);
					}
				}
				if (window.__SETTINGS_OBJECT.appearance.use_newer_ui_preset) {
					try {
						id("body-css").innerHTML = "body {background-color: #111111; color: white;}";
					} catch (e) {
						console.error(e);
					}
				}
			});
			run_promise(function () {
				if (Settings.exists("ntube_watch_later")) {
					const wl = Settings.load("ntube_watch_later");
					const vids = id("-watch-later");
					if (wl["videos"] && wl["videos"]["length"] && wl["videos"]["length"] > 0) {
						vids.innerHTML = "";
						for (var i = 0; i < wl["videos"].length; i++) {
							const vid_idx = i;
							const video = wl["videos"][vid_idx];
							const videoDiv = document.createElement("div");
							videoDiv.classList.add("poly-item", "video", "video_poly");
							const link1 = document.createElement("div");
							link1.onclick = function () {
								wl["videos"].remByVal(video);
								if (!Settings.save("ntube_watch_later", wl)) {
									alert("nTube: Watch Later\n\nFailed to update your watch later.\nPress OK to continue.");
								}
								window.location = "/watch?v=" + video.videoID;
							};
							const image2 = document.createElement("img");
							image2.style.verticalAlign = "middle";
							image2.style.display = "table-row";
							image2.style.width = "160px";
							image2.style.height = "90px";
							image2.loading = "lazy";
							image2.decoding = "async";
							image2.src = "https://i.ytimg.com/vi/" + video.videoID + "/mqdefault.jpg";
							image2.referrerPolicy = "no-referrer";
							link1.appendChild(image2);
							videoDiv.appendChild(link1);
							var contentDiv = document.createElement("div");
							contentDiv.classList.add("video_idiv");
							contentDiv.style.verticalAlign = "middle";
							contentDiv.style.paddingLeft = "5px";
							contentDiv.style.paddingRight = "5px";
							var videoTitle = document.createElement("h3");
							videoTitle.style.verticalAlign = "middle";
							videoTitle.style.margin = "0px auto";
							videoTitle.innerHTML = video.title;
							contentDiv.appendChild(videoTitle);
							var videoDescription = document.createElement("p");
							videoDescription.style.verticalAlign = "bottom";
							videoDescription.style.margin = "0px";
							videoDescription.style.fontSize = "small";
							videoDescription.innerHTML = video.author;
							videoDescription.innerHTML += " &centerdot; ";
							videoDescription.innerHTML += seconds2time(video.length);
							contentDiv.appendChild(videoDescription);
							videoDiv.appendChild(contentDiv);
							vids.appendChild(videoDiv);
						}
					} else {
						id("-watch-later").innerHTML = "No videos to watch later.";
					}
				} else {
					id("-watch-later").innerHTML = "No videos to watch later.";
				}
			});
		</script>
	</body>
</html>
